<template>
  <div class="interviewer-self-problem-set">
    <el-card>
      <el-tag>面试官个人题库</el-tag>

      <el-table
        ref="problemTable"
        :data="problemData"
        style="width: 100%"
        :stripe="true"
        @selection-change="onSelectionChange"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column prop="id" label="#" width="80"> </el-table-column>
        <el-table-column prop="title" label="题目" width="300">
          <template slot-scope="scope">
            <el-link type="primary" @click="onProblemClick(scope.row)">
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度"> </el-table-column>
      </el-table>
      <el-pagination
        layout="->,sizes,prev, pager, next,jumper"
        :page-sizes="[5, 10, 20]"
        :current-page="this.pagination.pageNum"
        :page-size="this.pagination.pageSize"
        :page-count="this.pagination.pageCount"
        :pager-count="5"
        @size-change="onPageSizeChange"
        @current-change="onPageNumChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="题目详情"
      :visible.sync="dialogDescriptionVisible"
      :before-close="beforeDialogDescriptionClose"
      append-to-body
    >
      <el-form :model="problem" label-width="80px">
        <el-form-item label="题目名称">
          <div
            style="
              background-color: #f6f6f6;
              padding: 0 20px;
              border-radius: 4px;
            "
          >
            {{ this.problem.title }}
          </div>
        </el-form-item>
        <el-form-item label="题目难度">
          <el-rate
            v-if="problem.difficulty"
            v-model="problem.difficulty"
            :max="3"
            :texts="['简单', '中等', '困难']"
            show-text
            disabled
          ></el-rate>
          <el-tag v-else disable-transitions>待定</el-tag>
        </el-form-item>
        <el-form-item label="题目描述">
          <div
            style="
              background-color: #f6f6f6;
              padding: 0 20px;
              border-radius: 4px;
            "
          >
            {{ problem.content }}
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "InterviewerSelfProblemSet",
  components: {},
  mounted() {
    this.getProblemData();
    this.setAlreadySelectionMark();
  },
  updated() {
    this.setSelectionMark();
    this.setAlreadySelectionMark();
  },
  methods: {
    onProblemClick(row) {
      this.problem = JSON.parse(JSON.stringify(row));
      this.dialogDescriptionVisible = true;
    },
    beforeDialogDescriptionClose(done) {
      this.setProblemDefault();
      done();
    },
    setProblemDefault() {
      this.problem = {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      };
    },
    clearSelection() {
      this.problemPageSelection = [];
      this.problemTempSelection = [];
      this.problemFinalSelection = [];
      this.problemAlreadySelection = [];
      this.$refs["problemTable"].clearSelection();
    },
    setSelectionMark() {
      this.problemFinalSelection.forEach((selectProblem) => {
        this.problemData.forEach((problem) => {
          if (problem._id === selectProblem._id) {
            this.$refs["problemTable"].toggleRowSelection(problem, true);
          }
        });
      });
    },
    setAlreadySelectionMark() {
      // console.log(
      //   "setAlreadySelectionMarkBefore",
      //   this.problemAlreadySelection
      // );
      let problemAlreadySelectionCopy = this.problemAlreadySelection.slice();
      let offset = 0;
      problemAlreadySelectionCopy.forEach((selectProblem, idx) => {
        this.problemData.forEach((problem) => {
          if (problem._id === selectProblem._id) {
            this.problemAlreadySelection.splice(idx - offset, 1);
            offset += 1;
            this.$refs["problemTable"].toggleRowSelection(problem, true);
          }
        });
      });
      // console.log("setAlreadySelectionMarkAfter", this.problemAlreadySelection);
    },
    setAlreadySelection(selection) {
      this.problemAlreadySelection = selection;
      this.setAlreadySelectionMark();
    },
    getFinalSelection() {
      // console.log(
      //   "before setSelectionMark,this.problemTempSelection",
      //   this.problemTempSelection
      // );
      // console.log(
      //   "before setSelectionMark,this.problemFinalSelection",
      //   this.problemFinalSelection
      // );
      this.problemFinalSelection = this.problemTempSelection.slice();
      let offset = 0;
      this.problemFinalSelection.forEach((selectProblem, idx) => {
        this.problemData.forEach((problem) => {
          if (problem._id === selectProblem._id) {
            this.problemTempSelection.splice(idx - offset, 1);
            offset += 1;
          }
        });
      });
      // console.log(
      //   "after setSelectionMark,this.problemTempSelection",
      //   this.problemTempSelection
      // );
      // console.log(
      //   "before setSelectionMark,this.problemFinalSelection",
      //   this.problemFinalSelection
      // );
    },
    getProblemData() {
      axios
        .get("/api/room/create/myproblemselect", {
          params: {
            pageNum: this.pagination.pageNum,
            pageSize: this.pagination.pageSize,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.pagination.pageCount = response.data.result.totalPageNum;
            this.problemData = response.data.result.problemSet;
            if (this.problemData.length) {
              this.problemData.forEach((problem, index) => {
                problem["id"] =
                  index +
                  1 +
                  (this.pagination.pageNum - 1) * this.pagination.pageSize;
              });
            }
            this.getFinalSelection();
            this.setSelectionMark();
            this.$message.success("获取面试官个人题目成功");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取面试官个人题目失败");
        });
    },
    onPageSizeChange(pageSizeVal) {
      this.pagination.pageSize = pageSizeVal;
      this.problemTempSelection = this.problemTempSelection.concat(
        this.problemPageSelection
      );
      // console.log(
      //   "onPageSizeChange,problemTempSelection",
      //   this.problemTempSelection
      // );
      this.getProblemData();
    },
    onPageNumChange(pageNumVal) {
      this.pagination.pageNum = pageNumVal;
      this.problemTempSelection = this.problemTempSelection.concat(
        this.problemPageSelection
      );
      // console.log(
      //   "onPageNumChange,problemTempSelection",
      //   this.problemTempSelection
      // );
      this.getProblemData();
    },
    onSelectionChange(selection) {
      this.problemPageSelection = selection;
      this.$emit(
        "onSelfProblemSelectionChange",
        this.problemTempSelection
          .concat(this.problemPageSelection)
          .concat(this.problemAlreadySelection)
      );
    },
  },
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 5,
        pageCount: 1,
      },
      dialogDescriptionVisible: false,
      problemPageSelection: [],
      problemTempSelection: [],
      problemFinalSelection: [],
      problemAlreadySelection: [],
      problem: {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      },
      problemData: [],
      // problemData: [
      //   {
      //     _id: "1",
      //     title: "test1",
      //     difficulty: 1,
      //     content: "111111",
      //     status: 1,
      //   },
      //   {
      //     _id: "2",
      //     title: "test2",
      //     difficulty: 2,
      //     content: "222222",
      //     status: 1,
      //   },
      //   {
      //     _id: "3",
      //     title: "test3",
      //     difficulty: 3,
      //     content: "333333",
      //     status: 1,
      //   },
      // ],
    };
  },
};
</script>

<style scoped></style>
